<!DOCTYPE html>
<html lang="en">

<head>
    <title>远程控制</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/remoteControl.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
    <link rel="stylesheet" href="../css/vant/lib/index.css">
    <script src="../css/vant/lib/vant.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-close-bold"></span>
            </div>
            <div class="app_headerTitle">远程控制</div>
            <div class="app_headerRight"></div>
        </div>
        <div class="appMain">
            <div class="appMain_tab">
                <div :class="[regionNum == 1? 'active': '']" @click="regionNum = 1">低区</div>
                <div :class="[regionNum == 2? 'active': '']" @click="regionNum = 2">中区</div>
                <div :class="[regionNum == 3? 'active': '']" @click="regionNum = 3">高区</div>
            </div>
            <div class="appMain_item1">
                <div class="appMain_item1Txt">出水压力给定 ：{{form.sliderVal1}}</div>
                <div class="appMain_item1Slider">
                    <div class="slider">
                        <van-slider v-model="form.sliderVal1" step="0.01" />
                    </div>
                    <div class="tips">MPa</div>
                </div>
            </div>
            <div class="appMain_item1">
                <div class="appMain_item1Txt">1#电动阀开度 ：{{form.sliderVal2+'.%'}}</div>
                <div class="appMain_item1Slider">
                    <div class="slider">
                        <van-slider v-model="form.sliderVal2" />
                    </div>
                    <div class="tips">%</div>
                </div>
            </div>
            <div class="appMain_item1 appMain_item1Border">
                <div class="appMain_item1Txt">2#电动阀开度 ：{{form.sliderVal3+'.%'}}</div>
                <div class="appMain_item1Slider">
                    <div class="slider">
                        <van-slider v-model="form.sliderVal3" />
                    </div>
                    <div class="tips">%</div>
                </div>
            </div>
            <div class="appMain_item2">
                <div class="tips">加泵延时(s)</div>
                <div>
                    <nut-stepper :value.sync="form.delayed" :simple="false"></nut-stepper>
                </div>
            </div>
            <div class="appMain_item2">
                <div class="tips">定时切换(s)</div>
                <div>
                    <nut-stepper :value.sync="form.switchTime" :simple="false"></nut-stepper>
                </div>
            </div>
            <div class="appMain_item2">
                <div class="tips">变频器故障</div>
                <div class="btn">复原</div>
            </div>
            <div class="appMain_item2">
                <div class="tips textIndent">1#泵开关</div>
                <div>
                    <nut-switch :active.sync="form.switchState1">
                    </nut-switch>
                </div>
            </div>
            <div class="appMain_item2">
                <div class="tips textIndent">1#泵开关</div>
                <div>
                    <nut-switch :active.sync="form.switchState2">
                    </nut-switch>
                </div>
            </div>
        </div>
        <div class="appBtn">
            <div @click="back">取消</div>
            <div @click="saveBtn">应用</div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                regionNum: 1,
                form: {
                    sliderVal1: 0.1,//出水压力给定 ：1.32
                    sliderVal2: 22,//1#电动阀开度 ：22.%
                    sliderVal3: 22,//2#电动阀开度 ：22.%
                    delayed: 0,//加泵延时(s)
                    switchTime: 0,//定时切换(s)
                    switchState1: false, //1#泵开关
                    switchState2: false,//1#泵开关
                }
            },
            watch: {
                regionNum(val) {
                    if (val) {
                        this.form.sliderVal1 = 0
                        this.form.sliderVal2 = 0
                        this.form.sliderVal3 = 0
                        this.form.delayed = 0
                        this.form.switchTime = 0
                        this.form.switchState1 = false
                        this.form.switchState2 = false
                    }
                }
            },
            mounted() { },
            methods: {
                back() {
                    window.history.go(-1)
                },
                saveBtn(){
                    console.log('表单值', this.form)
                }
            }
        })
    </script>
</body>

</html>